<template>
  <div id="app">
    <h2>---------App内容:modules中的内容--------</h2>
    <h2>{{$store.state.a.name}}</h2>
    <h2>{{$store.getters.fullName}}</h2>
    <h2>{{$store.getters.fullName2}}</h2>
    <h2>{{$store.getters.fullName3}}</h2>
    <button @click="updateName">修改名字</button>
    <button @click="aupdateName">异步修改名字</button>
    <h2>---------App内容:测试data响应式--------</h2>
    <button @click="editArray">修改数组</button>
    <button @click="editObj">修改对象</button>
    <h2>{{array}}</h2>
    <h2>{{obj}}</h2>

    <h2>---------App内容:info对象的内容是否是响应式的--------</h2>
    <button @click="updateInfo">修改信息</button>
    <h2>{{$store.state.info}}</h2>

    <h2>---------App内容--------</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="adds">+</button>
    <button @click="subs">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>
    <h2>---------App内容:getters相关信息--------</h2>
    <h2>{{$store.getters.powerCounter}}</h2>
    <h2>{{$store.getters.over20stu}}</h2>
    <h2>{{$store.getters.over20stuLength}}</h2>
    <h2>{{$store.getters.overAgestu(9)}}</h2>

    <h2>---------HelloVuex内容--------</h2>

    <hello-vuex></hello-vuex>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex.vue'
import {
  ADD
} from './store/mutations-types'


export default {
  name: 'App',
  data() {
    return {
      message: '我是App组件',
      array: [1, 2, 3, 4, 5],
      obj: { id: 1, name: '2', age: 3 }
    }
  },
  components: {
    HelloVuex
  },
  // computed: {
  //   more20student() {
  //     return this.$store.state.students.filter(item => item.age >= 20)
  //   }
  // },
  methods: {
    adds() {
      this.$store.commit(ADD)
    },
    subs() {
      this.$store.commit('sub')
    },
    addCount(count) {
      // payload:载荷
      // 1.普通的提交风格
      this.$store.commit('addCount', count)

      // 2.特殊的提交风格 (mutations 回调函数拿到的参数是一个对象)
      this.$store.commit({
        type: 'addCount',
        count: count
      })
    },
    addStudent() {
      const stu = { id: 114, name: 'zs', age: 80 }
      this.$store.commit('addStudent', stu)
    },
    updateInfo() {
      // this.$store.commit('updateInfo')
      // this.$store.dispatch('aUpdateInfo', {
      //   params: '我是携带的信息',
      //   success() {
      //     console.log('成功回调');
      //   }
      // })
      this.$store.dispatch('aUpdateInfo', '我是携带的信息')
        .then(res => {
          console.log(res);
        })

    },
    editArray() {
      // 不是响应式
      // this.array[0] = '3'

      // 可以
      // this.$set(this.array, 0, 333)

      // 不行,不是响应式
      this.array[5] = 6
    },
    editObj() {
      // 可以
      // this.obj.id = 2

      // 不是响应式
      this.obj.bbb = 3
    },
    // 个人总结:对象可以直接修改定义过的属性的值,会是响应式 / 数组不能直接修改,不是响应式,增加也不行,必须用push
    updateName() {
      this.$store.commit('updateName', 'cyjcyjA')
    },
    aupdateName() {
      this.$store.dispatch('aupdateName')
    }
  }
}
</script>

<style>
</style>
